<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>小妹商城首页</title>
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<link rel="stylesheet" href="__PUBLIC__/mobile/css/normalize.css">
		<link rel="stylesheet" href="__PUBLIC__/mobile/css/bootstrap.min.css">
		<link rel="stylesheet" href="__PUBLIC__/mobile/css/font-awesome.min.css">
		<link rel="stylesheet" href="__PUBLIC__/mobile/css/style.css?v=2">
		<script src="__PUBLIC__/mobile/js/jquery-1.11.3.min.js"></script>
		<script src="__PUBLIC__/mobile/js/jquery.SuperSlide.2.1.1.js"></script>
		<script type="text/javascript">
			function searchf() {
				$('#bg').css('display', 'block');
				$('#bg').animate({ 'opacity': '0.6' }, 500)
			}

			function searchb() {
				$('#bg').animate({ 'opacity': '0' }, 500, function() {
					$('#bg').css('display', 'none');
				})
			}
		</script>
		<style>
			header {
				z-index: 1200;
			}
			
			#bg,
			#bg_s {
				background-color: #aaa;
				background-repeat: no-repeat;
				width: 100%;
				height: 720px;
				position: fixed;
				top: 0;
				left: 0;
				opacity: 0;
				z-index: 1000;
				display: none;
			}
			
			#bg_s {
				height: 100px;
			}
			
			
			
			
			.top-contains {
				display: flex;
				flex-flow: row nowrap;
				align-items: center;
				/*background: #F0AD4E;*/
				background: #FFFFFF;
				/*				background-color: rgba(0,0,255,0.0);*/
			}
			
			.top-item-contians {
				display: flex;
				flex-flow: row nowrap;
				align-items: center;
				position: fixed;
				right: 4px;
				position: fixed;
				width: 20%;
				justify-content: flex-end;
				padding-right: 16px;
			}
			
			.top-selected {
				height: 30px;
				margin-right: 16px;
				font: "微软雅黑";
				font-size: 1.2rem;
				color: #ff4500;
			}
			
			.top_search {
				url(../images/top_search.png) no-repeat 1.0rem center !important border-radius: 1.1rem;
				background-color: #A9A9A9;
			}
			/*input标签样式*/
			input:-moz-placeholder,
			textarea:-moz-placeholder {
				color: #FF4500;
				font-size: 1.2rem;
			}
			input:-ms-input-placeholder,
			textarea:-ms-input-placeholder {
				color: #FF4500;
				font-size: 1.2rem;
			}
			input::-webkit-input-placeholder,
			textarea::-webkit-input-placeholder {
				color: #FF4500;
				font-size: 1.2rem;
			}
			
			@font-face {  
			 font-family: num;  
			 src: url("__PUBLIC__/mobile/fonts/arial.ttf") /* TTF file for CSS3 browsers */  
			}  
			
			
			
			
		</style>
	</head>

	<body>
		<!-- 头部开始 -->
		<div id="bg"></div>
		<header class="container-fluid top-contains">
			<a href="#product_select" style="margin-right: 4px;"><img width="30px" height="30px" src="__PUBLIC__/mobile/images/top_goods.png" /></a>
			<form action="{:U('WebApp/Goods/goodssearch')}" method="post" style="width: 100%; flex: 1;">
				<select id="product_select" name="search_type" class="l top-selected">
					<option value="0">商品</option>
					<option value="1">店铺</option>
				</select>
				<input type="text" name="key" placeholder="  买手制 全球购" class="top_search l" onFocus="searchf()" onBlur="searchb()" style="flex: 1; width: 100%; border:1px solid #ff4500;color: #FF4500; ">
			</form>
			<div class="top-item-contians">
				<a href="{:U('WebApp/Messages/queryByPage')}" style="display: none; position:relative;margin-top: 4px;"><img src="__PUBLIC__/mobile/images/top_xiaoxi.jpg" class="top_img">
					<if condition="$msg_num gt 0"><span style="position:absolute;display:bottom: ;right:0;top:-5px;color:#fff;padding:1px 5px;background: #C60001;border-radius:15px; margin-top: 4px;">{$msg_num}</span></if>
				</a>
				<a href="{:U('WebApp/Cart/index')}"><img src="__PUBLIC__/mobile/images/top_cart.png" class="" style="height: 30px;width: 30px;"></a>
			</div>
		</header>
		<div style="height:50px;"></div>
		<!-- 头部结束 -->
		<style>
			.blue-slide {
				background: #4390EE;
			}
			
			.red-slide {
				background: #CA4040;
			}
			
			.orange-slide {
				background: #FF8604;
			}
			
			.swiper-slide {
				color: #fff;
				font-size: 36px;
				text-align: center;
				width: 100%;
			}
			
			.swiper-slide img {
				width: 100%;
			}
			
			.swiper-slide {
				text-align: center;
				font-size: 18px;
				background: #fff;
				/* Center slide text vertically */
				display: -webkit-box;
				display: -ms-flexbox;
				display: -webkit-flex;
				display: flex;
				-webkit-box-pack: center;
				-ms-flex-pack: center;
				-webkit-justify-content: center;
				justify-content: center;
				-webkit-box-align: center;
				-ms-flex-align: center;
				-webkit-align-items: center;
				align-items: center;
			}
			/*分类列表样式*/
			
			.grid-container {
				height: 180px;
				margin-top: 4px;
			}
			
			.grid-item {
				float: left;
				overflow: hidden;
			}
			
			.grid-item-w {
				width: 25%;
			}
			
			.grid-item-h {
				height: 50%;
			}
			
			.div-vertical-layout {
				display: flex;
				flex-flow: column wrap;
				justify-content: center;
				align-items: center;
			}
			
			.grid-item:active {
				background-color: rgba(0, 0, 0, 0.1)
			}
			
			.img-circle {
				border-radius: 50%;
				width: 50px;
				height: 50px;
			}
			
			a:link {
				color: #6D6D72
			}
			
			a:visited {
				color: #6D6D72
			}
			
			a:hover {
				color: #6D6D72
			}
			
			a:active {
				color: #6D6D72
			}
			
			a {
				text-decoration: none;
			}
			
			.grid-item-title {
				margin-top: 2px;
				font-size: 1.2rem;
				font: "微软雅黑";
			}
			
			.float_bootm-contains {
				position: fixed;
				z-index: 11;
				display: flex;
				justify-content: center;
				align-items: center;
				bottom: 85px;
				right: 16px;
				background: #999999;
				width: 50px;
				height: 50px;
				border-radius: 50%;
				text-align: center;
				color: white;
				font-size: 1.1rem;
				/*opacity: 0.4;*/
				background-color: rgba(0, 0, 0, 0.2);
				overflow: hidden;
			}
			.fenlei-title{
				line-height: 0px;
			}
			
			.price-info{
				color: #E61414;
				font: arial;
				font-size: 1.6rem;
			}
			.price-info-double{
				color: #E61414;
				font-size: 1.2rem;
			}
			.price-int{
				color: #E61414;
				font-family: num;
				font-size: 1.6rem;
				margin-left: -4px;
			}
		</style>

		<!-- 轮播图开始 -->
		<link rel="stylesheet" href="__PUBLIC__/mobile/css/swiper.min.css">
		<div class="swiper-container">
			<div class="swiper-wrapper">
				<volist name="indexAds" id="vo">
					<div class="swiper-slide blue-slide">
						<a href="{$vo.adURL}"><img src="http://img.hnljxm.com/{$vo.adFile}" /></a>
					</div>
				</volist>
			</div>
			<!-- Add Pagination -->
			<div class="swiper-pagination"></div>
		</div>

		<script src="__PUBLIC__/mobile/js/swiper.min.js"></script>
		<script type="text/javascript">
			var swiper = new Swiper('.swiper-container', {
				loop: true,
				autoplay: 3000,
				pagination: '.swiper-pagination',
				paginationClickable: true,
				spaceBetween: 30
			});

			//			window.onscroll  = function(){
			//				var y =  window.scrollY;
			//				var x = y/130;
			//				var topContains = document.querySelector(".top-contains");
			//				if(y > 130){
			////					topContains.style.backgroundColor = "rgba(0,0,255,"+x+")";
			//					topContains.style.backgroundColor = "rgba(0,0,255,0.0)";
			//				}else if(y <= 130){
			//					topContains.style.backgroundColor = "rgba(0,0,255,1)";
			//				}
			//			}
		</script>
		<!-- 轮播图结束 -->

		<!--<div class="container-fluid">
			<div class="home-cart-contains">
				<volist name="ads61" id="vo">
					<div class="grid-item grid-item-w grid-item-h div-vertical-layout">
						<a href="{$vo.adURL}"><img src="http://img.hnljxm.com/{$vo.adFile}" width="25%" /></a>
					</div>
				</volist>
				<volist name="ads7" id="vo">
					<div class="grid-item grid-item-w grid-item-h div-vertical-layout">
						<a href="{$vo.adURL}"><img src="http://img.hnljxm.com/{$vo.adFile}" width="25%" /></a>
					</div>
				</volist>
				<div class="clear"></div>
			</div>
			<div>
				<volist name="ads62" id="vo">
					<div class="grid-item grid-item-w grid-item-h div-vertical-layout">
						<a href="{$vo.adURL}"><img src="http://img.hnljxm.com/{$vo.adFile}" width="25%" /></a>
					</div>
				</volist>
				<volist name="ads11" id="vo">
					<div class="grid-item grid-item-w grid-item-h div-vertical-layout">
						<a href="{$vo.adURL}"><img src="http://img.hnljxm.com/{$vo.adFile}" width="25 cyu[,.ccccccca...,,,,,,,,,,,,,,,,,,,.,.,a.,.,.,,.a,.,.,.a,.vvcvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv]%" /></a>
					</div>
				</volist>
				<div class="clear"></div>
			</div>-->
		<!--商品分类-->
		<div class="grid-container">
			<a class="grid-item grid-item-w grid-item-h div-vertical-layout" href="http://www.hnljxm.com/index.php/WebApp/Goods/shopList/cateid/737.html">
				<img class="img-circle" src="http://img.hnljxm.com/Upload/ads/2017-03/58c27b63eee98.png" />
				<span class="grid-item-title">全球购</span>
			</a>
			<a class="grid-item grid-item-w grid-item-h div-vertical-layout" href="http://www.hnljxm.com/index.php/WebApp/Goods/shopList/cateid/785.html">

				<img class="img-circle" src="http://img.hnljxm.com/Upload/ads/2016-12/58631b043b476.png" />
				<span class="grid-item-title">食品</span>
			</a>
			<a class="grid-item grid-item-w grid-item-h div-vertical-layout" href="http://www.hnljxm.com/index.php/WebApp/Goods/shopList/cateid/741.html">

				<img class="img-circle" src="http://img.hnljxm.com/Upload/ads/2016-12/58631b246cdeb.png" />
				<span class="grid-item-title">外卖</span>
			</a>
			<a class="grid-item grid-item-w grid-item-h div-vertical-layout" href="http://www.hnljxm.com/index.php/WebApp/Index/group.html">

				<img class="img-circle" src="http://img.hnljxm.com/Upload/ads/2017-03/58c7466b86a43.png" />
				<span class="grid-item-title">团购</span>
			</a>
			<a class="grid-item grid-item-w grid-item-h div-vertical-layout" href="http://www.hnljxm.com/index.php/WebApp/Goods/shopList/cateid/1022.html#">
				<img class="img-circle" src="http://img.hnljxm.com/Upload/ads/2016-12/58631af6adb84.png" />
				<span class="grid-item-title">服装</span>
			</a>
			<a class="grid-item grid-item-w grid-item-h div-vertical-layout" href="http://www.hnljxm.com/index.php/WebApp/Goods/getGoodsList/goodsCatId1/891.html#">
				<img class="img-circle" src="http://img.hnljxm.com/Upload/ads/2016-12/58631a9024640.png" />
				<!--<span style="margin-top: 2px; font-size: 12px;">热门</span>-->
				<span class="grid-item-title">水果</span>
			</a>
			<a class="grid-item grid-item-w grid-item-h div-vertical-layout" href="http://www.hnljxm.com/index.php/WebApp/Goods/shopList/cateid/748.html">

				<img class="img-circle" src="http://img.hnljxm.com/Upload/ads/2016-12/58631ae8690e2.png" />
				<!--<span style="margin-top: 2px; font-size: 12px;">热门</span>-->
				<span class="grid-item-title">日用品</span>
			</a>
			<a class="grid-item grid-item-w grid-item-h div-vertical-layout" href="http://www.hnljxm.com/index.php/WebApp/Goods/shopList/cateid/854.html">
				<img class="img-circle" src="http://img.hnljxm.com/Upload/ads/2016-12/58631a5d3f17f.png" />
				<span class="grid-item-title">母婴</span>
			</a>
		</div>
		<div style="height:0.8rem;background:#f3f3f3;border-top:1px solid #e3e3e3;margin-top:0.8rem;" class="row"></div>
		<!-- 专场开始 -->
		<div class="row index_zc">
			<volist name="ads3" id="vo">
				<a href="{$vo.adURL}"><img src="http://img.hnljxm.com/{$vo.adFile}" width="100%" height="125" /></a>
			</volist>
		</div>
		<!-- 专场结束 -->
		<!-- 限时抢购开始 -->
		<div class="row" style="display: none;">
			<h4 class="fenlei-title" style="color:#2f2f2f;"><img src="__PUBLIC__/mobile/images/xstg.png"> 限时抢购
        		<span style="color:#a7a7a7;font-size:1.4rem;">|再晚就没有了</span></h4>
		</div>
		<div class="row">
			<div class="picScroll-left">
				<div class="bd">
					<ul class="picList">
						<volist name="indexAds_5" id="vo">
							<li>
								<div class="xstcp"><img src="http://img.hnljxm.com/{$vo.adFile}" width="100%"></div>
								<div class="xst_r"><img src="__PUBLIC__/mobile/images/prq.png" width="100%"><img src="__PUBLIC__/mobile/images/xst.png" width="100%">
									<div class="xstsl">已拼{$vo.adSort}件</div>
								</div>
								<div style="clear:both;"></div>
							</li>
						</volist>
						<volist name="indexAds_5" id="vo">
							<li>
								<div class="xstcp"><img src="http://img.hnljxm.com/{$vo.adFile}" width="100%"></div>
								<div class="xst_r"><img src="__PUBLIC__/mobile/images/prq.png" width="100%"><img src="__PUBLIC__/mobile/images/xst.png" width="100%">
									<div class="xstsl">已拼{$vo.adSort}件</div>
								</div>
								<div style="clear:both;"></div>
							</li>
						</volist>
					</ul>
				</div>
			</div>

			<script type="text/javascript">
				jQuery(".picScroll-left").slide({ mainCell: ".bd ul", autoPlay: true, effect: "leftMarquee", vis: 3, interTime: 60, trigger: "click" });
			</script>
		</div>
		<!-- 限时抢购结束 -->
		<div style="height:0.8rem;background:#f3f3f3;border-top:1px solid #e3e3e3;" class="row"></div>
		<div class="row" style="display: flex;align-items: center; justify-content: center; flex-flow: row nowrap;">
			<span style="color: #37d791;width: 5%; margin-right: 8px; "> —</span>
			<h2 class="fenlei-title" style="color:#37d791;text-align:left;font-size:1.2rem;"><img style="width: 20px; height: 20px;" src="__PUBLIC__/mobile/images/19_24.jpg">精品店铺</h4>
			<span style="color: #37d791;width: 5%; margin-left: 8px; "> —</span>
		</div>
		<!--<div style="text-align:center;"><img src="__PUBLIC__/mobile/images/jpdp_top.jpg" style="width:30px;"></div>-->
		<volist name="indexAds_4" id="vo">
			<div class="row">
				<a href="{$vo.adURL}"><img src="http://img.hnljxm.com/{$vo.adFile}" width="100%"></a>
				<p class="jingpin-shop-title">
					<!-- <span>6折起</span> -->
					<span style="color:#666;">{$vo.adName}</span>
					<span></span>
				</p>
			</div>
		</volist>
		<!-- 猜你喜欢开始 -->
		<div style="height:0.8rem;background:#f3f3f3;border-top:1px solid #e3e3e3;" class="row"></div>
		<div class="row" style="display: flex;align-items: center; justify-content: center; flex-flow: row nowrap;">
			<span style="color: #ff4500;width: 5%; margin-right: 8px; "> —</span>
			<h2 class="fenlei-title" style="color:#FF4500;text-align:left;font-size:1.2rem;"><img style="width: 20px; height: 20px;" src="__PUBLIC__/mobile/images/cnxh.jpg">猜你喜欢</h4>
			<span style="color: #ff4500;width: 5%; margin-left: 8px; "> —</span>
		</div>
		<div class="row">
			<ul class="index_prolist">

				<volist name="newGoods" id="vo">
					<li>
						<a href="{:U('WebApp/Goods/goodsDetails',array('goodsId'=>$vo['goodsId']))}">
							<div class="product-info">
								<div class="product-img"><img class="deal-img" src="http://img.hnljxm.com/{$vo.goodsThums}" alt="{$vo.goodsName}"></div>
								<div class="product-name">{$vo.goodsName}</div>
								<div class="price-info"><span style="font-size:1.0rem ;">￥</span>
									
									<span class="price-int" id="goodsListPrice">
										<?php  if ($vo['isgroup']==1){ 
										  echo $vo['groupPrice'];
										}else{  
										 echo $vo['shopPrice'] ; } ?>
									 </span>
								</div>
								<div class="price-s" style="font: arial;"><s>￥{$vo['marketPrice']}</s><span>{$vo['saleCount']+$vo['orSale']}件已售</span></div>
							</div>
						</a>
					</li>
				</volist>
				<div class="clear"></div>
			</ul>
		</div>

		<!-- 猜你喜欢结束 -->
		</div>
		<script type="text/javascript">
			
			
		</script>

		<!--底部悬浮直播按钮-->
		<!--<a href="" class="float_bootm-contains">
			<marquee  style="font-size: 1.1rem;">直播中</marquee>
		</a>-->

		<!--footer start-->
		<include file="./Apps/WebApp/View/mobile/footer.html" />
		<!--footer end-->

	</body>

</html>